@import './_lib-reset'; // 重置浏览器样式
@import './_lib-base'; // 针对 UI 设计稿而做的一些样式重置
@import './_lib-variable'; //变量
@import './_lib-mixin'; 
@import './_ant-rest';
@import './panel-var';
@import './panel-mixin';

// 公共属性、类名
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  background-size: cover;
  color: $cl-yellow;
  &.ondrag {
    opacity: 0.8;
  }
}



//******************   底部状态条 勿改  开始  ****************** //

.status-bar-item-wrapper{
  position: relative;
  height:31px;
  padding: 0 8px;
  transition: all .2s ease-in-out;
  &:hover{
    background: rgba(0,0,0,0.8);
  }
}
.status-bar-item {
  display: flex;
  flex-direction: row;
  line-height: 32px;
  color: $level3;
  height: 32px;
  overflow: hidden;
  i{
    font-size: 16px;
  }
  p{
      margin-left: 5px;
  }
  &.abnormal {
    color: $level1;
  }
  &.undetected {
    color: $undetected;
  }
}
.status-item-delay {
  min-width:70px;
}
.popup-wrapper {
  display: none;
  position: absolute;
  bottom: 40px;
  right: 0;
  padding: 5px 10px;
  background: rgba(0,0,0,.9);
  border-radius: 5px;
  z-index: 2;
  .popup-list {
    .popup-list-item{
        height: 30px;
        line-height: 30px;
        .popup-item-name {
            padding-left: 20px;
        }
        .popup-item-value {
            margin-left: 10px;
        }
    }
  }
  .arrow {
    position: relative;
    
  }
  .arrow:after, .arrow:before {
    border: 8px solid transparent;
    border-top: 8px solid rgba(0,0,0,.8);
    width: 0;
    height: 0;
    position: absolute;
    top: 5px;
    right: 0px;
    content: ' ';
  }
}

.status-bar-item-wrapper.right {
  .popup-wrapper {
    left: 0;
    .arrow:after, .arrow:before {
      left: 0px;
    }
  }
}


.status-bar-item.level1{
  color: $level1;
}
.status-bar-item.level2{
  color: $level2;
}
.status-bar-item.level3{
  color: $level3;
}
.status-bar-item.level4{
  color: $level4;
}
.status-bar-item.level5{
  color: $level5;
}
.networkLevel0{
  color: $level1;
}
.networkLevel1{
  color: $level1;
}

.networkLevel2{
  color: $level2;
}

.networkLevel3{
  color: $level3;
}

.networkLevel4{
  color: $level4;
}

.networkLevel5{
  color: $level5;
}

.displayEffectLevel1 {
  color: $level1;
}
.displayEffectLevel2 {
  color: $level2;
}
.displayEffectLevel3 {
  color: $level3;
}
.displayEffectLevel4 {
  color: $level4;
}
.displayEffectLevel5 {
  color: $level5;
}

.terminal-type {
  height: 26px;
  margin-left: 5px;
  line-height: 26px;
  border-bottom: 1px solid rgba(193, 255, 251, 0.2);
}
.terminal-title {
  padding: 5px 0;
  font-size: 12px;
}
.delayLevel1{
  color: $level5;
}
.delayLevel2{
  color: $level4;
}
.delayLevel3{
  color: $level3;
}
.delayLevel4{
  color: $level2;
}
.delayLevel5{
  color: $level1;
}

.iconicon_shangchuan {
  left: -8px;
  color: rgba(161, 230, 226, .4);
}
.status-item-upDown{
  padding: 0
}
.iconicon_xiazai {
  right: -8px;
  color: rgba(161, 230, 226, .4);
}

.iconicon_shangchuan.active,
.iconicon_xiazai.active {
  color: $level5;
}
@media screen and (max-width: 1100px){
  .status-item-language,
  .status-item-address,
  .status-item-browser {
    display: none;
  }
}
@media screen and (max-width: 990px){
  .status-item-video,
  .status-item-audio,
  
  .status-item-memory {
    display: none;
  }
}
@media screen and (max-width: 830px){
  .status-item-level,
  .status-item-display,
  .status-item-gpu {
    display: none;
  }
}
@media screen and (max-width: 650px){
  .status-item-terminal,
  .status-item-network{
    display: none;
  }
}
@media screen and (max-width: 520px){
  .status-item-delay,
  .status-item-performanceFps{
    display: none;
  }
}
@media screen and (max-width: 390px){
  .status-item-upDown,
  .status-item-chip{
    display: none;
  }
}
//******************   底部状态条 勿改  结束  ****************** //

